<!-- 新增问题 -->
<template>
    <div class="addAudit">
        <div class="header flexbetween mb20">
            <div>
                <el-select size="small" style="width:200px" v-model="status" class="mr20" @change="filterList">
                    <el-option label="所有状态" value=""></el-option>
                    <el-option label="待审核" value="2"></el-option>
                    <el-option label="已通过" value="1"></el-option>
                    <el-option label="已驳回" value="3"></el-option>
                </el-select>
                <el-dropdown class="mr20" trigger="click">
                    <span class="el-dropdown-link" style="width: 200px">
                        批量操作<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" style="width: 200px">
                        <el-dropdown-item @click.native="batchDel" v-if="menuAuthCodes.includes('M144')">批量删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-input v-model="keyword" placeholder="请输入内容" size="small" style="width:300px;">
                    <el-select v-model="keywordType" size="small" style="width:100px" slot="prepend">
                        <el-option label="按问题" value="question"></el-option>
                        <el-option label="按答案" value="answer"></el-option>
                    </el-select>
                    <span slot="suffix" class="iconfont icon-sousuo" @click="filterList"></span>
                </el-input>
            </div>
            <div class="iconBtn">
                <el-tooltip effect="light" content="高级筛选" placement="top" :enterable="false">
                    <span class="iconfont icon-shaixuan" @click="filterVisivle = !filterVisivle"></span>
                </el-tooltip>
                <el-tooltip effect="light" content="导入" placement="top" :enterable="false" class="ml20"
                            v-if="menuAuthCodes.includes('M142')">
                    <span class="iconfont icon-daoru" @click="importShow = !importShow"></span>
                </el-tooltip>
            </div>
        </div>
        <element-table :data="questionList" :columns="cloumns" :loading="tableLoading" :tableHeight="tableHeight" :pageNo="pageNo"
                       :pageSize="pageSize" :total="total" @changePageNo="changePageNo" @changePageSize="changePageSize"
                       @changeSelect="changeSelect" isNeedSelect>
        </element-table>

        <!-- 问题导入 -->
        <import id="addAuditImport" :importShow.sync="importShow" :importConfig="importConfig" @importSuccess="filterList" />

        <!-- 审核弹窗 -->
        <audit-dialog :auditVisible.sync="auditVisible" auditType="add" ref="auditDialog"></audit-dialog>

        <!-- 筛选 -->
        <transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
            <div id="addAuditFilter" class="filterDialog" v-show="filterVisivle">
                <div class="searchBox">
                    <div class="searchItem">
                        <span>创建时间</span>
                        <el-date-picker v-model="createTime" type="datetimerange" size="small" value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </div>
                    <div class="searchItem">
                        <span>创建人员</span>
                        <el-select v-model="addUserId" placeholder="请选择" clearable size="small">
                            <el-option v-for="item in userList" :key="item.id" :label="item.userName" :value="item.id"></el-option>
                        </el-select>
                    </div>
                    <div class="searchItem">
                        <span>状态条件</span>
                        <el-select v-model="status" placeholder="请选择" clearable size="small">
                            <el-option label="待审核" value="2"></el-option>
                            <el-option label="已通过" value="1"></el-option>
                            <el-option label="已驳回" value="3"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="footer">
                    <el-button size="small" type="text" @click="filterVisivle = false">取消</el-button>
                    <el-button size="small" plain @click="resetSearch">重置</el-button>
                    <el-button type="primary" size="small" @click="filterList">保存</el-button>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import Import from "@/components/Import";
import elementTable from "@/components/elementTable";
import auditDialog from "@/views/robotKnowledge/knowledgeTransfer/auditDialog.vue";
import { getUserList } from "@/api/knowledge";
import { getQuestionImportList, delQuestionImport } from "@/api/knowledgeTransfer";
export default {
    name: "addAudit",
    props: {
        classId: {
            type: String,
        },
    },
    data() {
        return {
            auditVisible: false,
            questionList: [],
            tableLoading: false,
            pageNo: 1,
            pageSize: 10,
            total: 0,
            multipleChoice: [],
            status: "",
            keywordType: "question",
            keyword: "",
            filterVisivle: false,
            createTime: [],
            addUserId: "",
            cloumns: [
                {
                    config: {
                        label: "标准问",
                        prop: "question",
                        width: "250"
                    },
                },
                {
                    config: {
                        label: "所属分类",
                        prop: "className",
                    }
                },
                {
                    config: {
                        label: "创建人员",
                        prop: "addUserName",
                    }
                },
                {
                    config: {
                        label: "创建时间",
                        prop: "addTime",
                        width: "170"
                    }
                },
                {
                    config: {
                        label: "状态",
                        width: "100"
                    },
                    render: (h, scope) => {
                        var status = scope.status == 1 ? "已通过" : scope.status == 2 ? "待审核" : "已驳回";
                        return (<span>{status}</span>);
                    }
                },
                {
                    config: {
                        label: "操作",
                        width: "120",
                    },
                    render: (h, scope) => {
                        if (scope.status == 2) {
                            return (
                                <div class="operation">
                                    <el-tooltip effect="light" content="审核" placement="top" enterable={false}
                                        v-show={this.menuAuthCodes.includes('M143')}>
                                        <span class="iconfont icon-shenhe" onClick={() => this.audit(scope)}></span>
                                    </el-tooltip>
                                </div>
                            )
                        } else {
                            return (
                                <el-link type="primary" underline={false} onClick={() => this.audit(scope)}>查看详情</el-link>
                            )
                        }
                    },
                },
            ],
            importShow: false,
            importConfig: {
                css: {
                    top: "210px",
                    right: "35px",
                },
                title: "下载知识导入模板，根据模板的格式填写知识内容，填写完成后，一键导入",
                downloadUrl: "/static/download/问答答案导入模板.xlsx",
                importUrl: "/v1/admin/question/importQuestion",
            },
            userList: []
        }
    },
    created() {
        this.getQuestionList();
        this.getUserList();
        document.addEventListener('mouseup', (e) => {
            var addAuditFilter = document.querySelector('#addAuditFilter');
            if (addAuditFilter) {
                if (e.target.className) {
                    if (e.target.className.indexOf("icon-shaixuan") > -1 && this.filterVisivle) return;
                }
                if ($(e.target).parents(".el-popper").length == 0 && !addAuditFilter.contains(e.target)) {
                    this.filterVisivle = false;
                }
            }
        });
    },
    methods: {
        getQuestionList(cb) {
            if (!this.menuAuthCodes.includes("M141")) {
                return;
            }
            if (!cb) {
                this.tableLoading = true;
            }
            var param = {
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                keywordType: this.keywordType,
                keyword: this.keyword,
                classId: this.classId != "0" ? this.classId : ""
            }
            if (this.status) {
                param.status = this.status;
            }
            if (this.createTime) {
                if (this.createTime.length > 0) {
                    param.addStartTime = this.createTime[0];
                    param.addEndTime = this.createTime[1];
                }
            }
            getQuestionImportList(param).then((resp) => {
                this.tableLoading = false;
                if (resp.status == 0) {
                    this.total = resp.data.total;
                    this.questionList = resp.data.list || [];
                    cb && cb(resp.data.list);
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        audit(data) {
            this.$refs.auditDialog.setAuditInfo(data);
            this.auditVisible = true;
        },
        filterList() {
            this.pageNo = 1;
            this.getQuestionList();
        },
        changeSelect(val) {
            this.multipleChoice = val;
        },
        delQuestionImport(id) {
            this.$confirm("是否确定删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                delQuestionImport({ ids: id }).then((resp) => {
                    if (resp.status == 0) {
                        this.$antMessage.success("删除成功");
                        this.pageNo = 1;
                        this.getQuestionList();
                    } else {
                        this.$antMessage.warning(resp.message);
                    }
                });
            }).catch();
        },
        batchDel() {
            if (this.multipleChoice.length == 0) {
                return this.$antMessage.warning("请先勾选问题");
            }
            var ids = [];
            this.multipleChoice.forEach(item => { ids.push(item.id) });
            this.delQuestionImport(ids.join(","));
        },
        changePageSize(val) {
            this.pageSize = val;
            this.getQuestionList();
        },
        changePageNo(val) {
            this.pageNo = val;
            this.getQuestionList();
        },
        getUserList() {
            var param = {
                pageNo: 1,
                pageSize: 999
            }
            getUserList(param).then(resp => {
                if (resp.status == 0) {
                    this.userList = resp.data.list;
                }
            });
        },
        //重置搜索条件
        resetSearch() {
            this.addUserId = this.status = "";
            this.createTime = [];
        }
    },
    computed: {
        tableHeight() {
            return document.body.clientHeight - 300;
        },
    },
    watch: {
        classId() {
            this.filterList();
        }
    },
    components: {
        elementTable,
        auditDialog,
        Import
    }
}
</script>

<style lang="scss">
.addAudit {
}
</style>